<template>
<input type="text" @input="search" v-model="keyword">
<ul>
    <li v-for="(item, index) in result" :key="item.di">{{ index }} {{ item.content }}</li>
</ul>
<div v-show="result.length === 0">搜不到的傻B</div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
const keyword = ref('')
const result = ref([])
const search = async () => {
    let word = keyword.value.trim();
    if(!word){
        result.value = []
        return;
    }
    let { data } =  await axios ({
        method: "get",
        url: "http://127.0.0.1:5000/search?word=" + word
    })
    result.value = data
}

</script>

<style scoped>
li {
    list-style-type: none;
}
</style>